<template>
  <div class="splist">
    <div class="splist_cont">
      <div class="cont">
        <ElRow :gutter="12">
          <ElCol :span="24">
            <ElCard shadow="always">
              <div class="flex">
                <div>
                  <ElIcon>
                    <Search />
                  </ElIcon>
                  <span>筛选搜索</span>
                </div>
                <div>
                  <ElButton @click="resetForm">重置</ElButton>
                  <ElButton type="primary" @click="submitFn">查询搜索</ElButton>
                </div>
              </div>
              <section>
                <el-form
                  :model="ruleForm"
                  class="demo-form-inline"
                  @submit.prevent="submitFn"
                  ref="searchFormRef"
                >
                  <el-form-item label="输入搜索" prop="keyword">
                    <el-input
                      v-model="ruleForm.keyword"
                      placeholder="商品名称"
                    />
                  </el-form-item>
                  <el-form-item label="商品货号" prop="productSn">
                    <el-input
                      v-model="ruleForm.productSn"
                      placeholder="商品货号"
                    />
                  </el-form-item>
                  <el-form-item label="商品分类" prop="productCategoryId">
                    <el-select
                      v-model="ruleForm.productCategoryId"
                      clearable
                    >
                    <el-option
                    v-for="item in state.rollList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                  </el-form-item>
                  <el-form-item label="商品品牌" prop="brandId">
                    <el-select
                      v-model="ruleForm.brandId"
                      placeholder="请选择品牌"
                    >
                    <el-option
                    v-for="item in state.attribute"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="上架状态" prop="publishStatus">
                    <el-select
                      v-model="ruleForm.publishStatus"
                      placeholder="全部"
                    >
                      <el-option label="上架 " :value="1" />
                      <el-option label="下架" :value="0" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="审核状态" prop="verifyStatus">
                    <el-select
                      v-model="ruleForm.verifyStatus"
                      placeholder="全部"
                    >
                      <el-option label="审核通过" :value="1" />
                      <el-option label="未审核" :value="0" />
                    </el-select>
                  </el-form-item>
                </el-form>
              </section>
            </ElCard>
          </ElCol>
        </ElRow>
      </div>
      <div class="cont_view">
        <div class="cont">
          <ElRow :gutter="12">
            <ElCol :span="24">
              <ElCard shadow="always">
                <ElIcon>
                  <Tickets />
                </ElIcon>
                <span>数据列表</span>
                <el-button size="mini" @click="add">添加</el-button>
              </ElCard>
            </ElCol>
          </ElRow>
        </div>
      </div>
      <div class="middle">
        <ElTable border style="width: 100%" :data="ListData">
          <el-table-column
            align="center"
            width="60"
            type="selection"
          ></el-table-column>
          <el-table-column align="center" prop="id" label="编号" />
          <el-table-column
            align="center"
            prop="pic"
            label="商品照片"
            width="120"
          >
            <template #default="scope">
              <img :src="scope.row.pic" style="width: 80px; height: 80px" />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="name"
            label="商品名称"
            width="300"
          >
            <template #default="scope">
              <p>{{ scope.row.name }}</p>
              <p>品牌：{{ scope.row.brandName }}</p>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="price"
            label="价格/货物"
            width="150"
          >
            <template #default="scope">
              <p>价格：￥{{ scope.row.price }}</p>
              <p>货号：{{ scope.row.productSn }}</p>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="recommandStatus"
            label="标签"
            width="120"
          >
            <template #default="scope">
              <el-switch
                v-model="scope.row.publishStatus"
                inactive-text="上架"
                :active-value="1"
                :inactive-value="0"
                @change="changeStatus(scope.row)"
              ></el-switch>
              <el-switch
                v-model="scope.row.newStatus"
                inactive-text="新品"
                :active-value="1"
                :inactive-value="0"
                @change="changeNewStatus(scope.row)"
              />
              <el-switch
                v-model="scope.row.recommandStatus"
                inactive-text="推荐"
                :active-value="1"
                :inactive-value="0"
                @change="changerecStatus(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column align="center" prop="sort" label="排序" />
          <el-table-column align="center" prop="stock" label="SKU库存">
            <el-icon class="is_active">
              <el-button type="primary" :icon="Edit" circle />
            </el-icon>
          </el-table-column>
          <el-table-column align="center" prop="sale" label="销量" />
          <el-table-column align="center" prop="verifyStatus" label="审核状态">
            <template #default>
              <p>未审核</p>
              <p style="cursor: pointer">审核详情</p>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template #default="scope">
              <el-button @click="setSku">编辑</el-button>
              <el-button type="danger" @click="del(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </ElTable>
      </div>
      <ElConfigProvider :locale="zhCn">
        <el-pagination
          v-model:currentPage="ruleForm.pageNum"
          v-model:page-size="ruleForm.pageSize"
          background
          layout="total, sizes, prev, pager, next ,jumper"
          :total="total"
          @size-change="pageSizeChagne"
          @current-change="currentChagne"
          :page-sizes="[5, 10, 15]"
        />
      </ElConfigProvider>
    </div>
  </div>
</template>

<script setup lang="ts">
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { reactive, Ref, ref, toRefs } from "vue";
import { ElMessage, ElMessageBox, FormInstance } from "element-plus";
import { Edit } from "@element-plus/icons-vue";
import { user } from "@/api";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();

// 类型约束
interface IState {
  ListData: IshanpinList[];
  ruleForm: Ishangpins;
  total: number;
  rollList:any[]
  attribute: any[];
  listParams:Ibrand
}
// 数据约束
const state = reactive<IState>({
  ListData: [],
  ruleForm: {
    keyword: "",
    productSn: "",
    productCategoryId: "",
    brandId: "",
    publishStatus: "",
    verifyStatus: "",
    pageNum: 1,
    pageSize: 5,
  },
  total: 0,
  listParams: {
      list:[],
      pageNum: 1,
      pageSize: 100,
      total:0,
      totalPage:0,
    },
  rollList:[],
  attribute: [], 
});

  // 请求商品分类的所有
  user.withChildrenApi().then((res)=>{
    if(res.code===200){
      state.rollList=res.data.map((item)=>{
        return {
          value: item.id,
  
          label: item.name,
        };
      })
    }
  })

  // 请求商品品牌的所有
  user.brandListAPi(state.listParams).then((res) => {
    if (res.code === 200) {
        console.log(       res.data
        );
        
      state.attribute = res.data.list.map((item) => { 
        return {
          value: item.id,
  
          label: item.name,
        };
      });
    }
})
// 请求所有的数据进行渲染
const getList = () => {
  user.shangpingApi(state.ruleForm).then((res: any) => {
    if (res.code === 200) {
      state.ListData = res.data.list;
      state.total = res.data.total;
    }
  });
};
// 点击页数
const pageSizeChagne = (val: number) => {
  getList();
};

const currentChagne = (val: number) => {
  getList();
};
getList();

// 点击查询
const submitFn = () => {
  // 搜索一定要把 页码调整到第一页
  state.ruleForm.pageNum=1
  // 重新请求一个数组回来把数据渲染到表格里面
  getList();
};

const searchFormRef = ref<FormInstance>();

// 重置
const resetForm = () => {
  searchFormRef.value?.resetFields();
};

const { ruleForm, ListData, total } = toRefs(state);

// 编辑
function setSku() {
  console.log(123);
}
// 添加
function add() {
  router.push("/pms/addProduct");
}

// 切换批量上下架的状态
const changeStatus = (row: IshanpinList) => {
  user
    .IupdatePulishStatusApi({
      id: row.id,
      publishStatus: row.publishStatus,
    })
    .then((res) => {
      ElMessage({
        message: res.message,
        type: res.code === 200 ? "success" : "error",
      });
    })
    .catch((err) => {
      // 方式1
      row.publishStatus = row.publishStatus === 1 ? 0 : 1;
    });
};

// 批量设为新品
const changeNewStatus = (row: IshanpinList) => {
  user
    .IupdateNewStatusApi({
      id: row.id,
      newStatus: row.newStatus,
    })
    .then((res) => {
      ElMessage({
        message: res.message,
        type: res.code === 200 ? "success" : "error",
      });
    })
    .catch((err) => {
      row.newStatus = row.newStatus === 1 ? 0 : 1;
    });
};

// 批量推荐新品
const changerecStatus = (row: IshanpinList) => {
  console.log(row);
  user
    .IupdaterecommendStatusApi({
      id: row.id,
      recommandStatus: row.recommandStatus,
    })
    .then((res) => {
      ElMessage({
        message: res.message,
        type: res.code === 200 ? "success" : "error",
      });
    })
    .catch((err) => {
      row.recommendStatus = row.recommendStatus === 1 ? 0 : 1;
    });
};

// 批量修改审核状态


// 批量删除
const del = (row: IshanpinList) => {
  ElMessageBox.confirm("是否要进行删除操作?", "提示", {
    distinguishCancelAndClose: true,
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      user.IupdateDeletStatusApi({
        id: row.id,
        deleteStatus: row.deleteStatus,
      });
      ElMessage({
        message: "删除成功",
        type: "success",
      });
      getList();
    })

    .catch((err) => {});
};
</script>

<style lang="less" scoped>
.splist {
  // padding: 15px 15px 100px;
  margin: auto;
}

.breadcrumb {
  width: 100%;
  z-index: 999;
  background-color: #fff;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  top: 70px;
}

section {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-between;
  margin-top: 10px;
}

:deep(.el-form-item) {
  min-width: 384px;
  // flex: 1;
  width: 33%;
}

.splist_cont {
  padding: 15px 15px 100px;
  margin: auto;
}

.el-form-item {
  float: left;
  padding-left: 5px;
}

.cont_view {
  .cont {
    margin-top: 20px;
    margin-bottom: 20px;
    vertical-align: middle;
  }

  :deep {
    .el-button {
      float: right;
      margin-left: 20px;
    }
  }
}

.el-form {
  margin-left: 80px;
}

:deep {
  .el-table .cell {
    text-align: center;
  }

  .el-icon {
    font-size: 14px;
    margin-right: 10px;
  }
}

.bottom {
  display: flex;
  margin-top: 10px;
  justify-content: end;
}

.chcked {
  color: #409eff;
  cursor: pointer;
}

.operation {
  display: flex;
  font-size: 12px;
}

.cont {
  margin-top: 55px;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.is_active {
  font-size: 30px;
  border-radius: 50%;
  padding: 12px;
}

.el-button {
  margin: 10px;
}
</style>
